﻿@model StockQuoteWebSite.Models.StockModel

<div class="row">
    <div class="col-md-10">
        <h2>@Model.TickerSymbol (@Model.CompanyName)</h2>
    </div>
    <div class="col-md-2" style="text-align: right;">
        <h2>$@Model.LastPrice</h2>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div id="Chart" style="width: 100%; height: 300px;"></div>
        <script type="text/javascript">
            var options = {
                xaxis: {
                    mode: "time",
                    timeformat: "%m/%e",
                    minTicksSize: [1, "day"],
                    min: (new Date("@Model.HistoricalPricesStartDate.ToShortDateString()").getTime()),
                    max: (new Date("@Model.HistoricalPricesEndDate.ToShortDateString()").getTime())
                },

                yaxis: {
                    min: @(Model.HistoricalPrices.Values.Min() * .95M),
                    max: @(Model.HistoricalPrices.Values.Max() * 1.05M),
                },

                series: {
                    lines: {show: true},
                    points: {show: true}
                },

                grid: {
                    hoverable: true,
                    clickable: true},

                title: "Last 30 days"
            };

            $(document).ready(function(){
                $.plot($('#Chart'), [[ @Model.HistoricalPricesJsonString ]], options);
                $('#Chart').unbind('plothover');

                $('#Chart').bind('plothover', function(event, pos, item) {
                    if(item) {
                        if(previousPoint != item.dataIndex) {
                            previousPoint = item.DataIndex;

                            $('#tooltip').remove();
                            var x = item.datapoint[0],
                                y = item.datapoint[1].toFixed(2);

                            var date = new Date(1970,0,1);
                            date.setSeconds(x/1000);
                            showTooltip(item.pageX, item.pageY, date.toDateString() + ": $" + y);
                        }
                    }
                    else{
                        $('#tooltip').remove();
                        previousPoint = null;
                    }
                })
            });

        </script>
    </div>
</div>
